<template>
  <div>
    <div id="app">
      <ve-line
        :settings="chartSettings"
        :extend="chartExtend"
        :legend-visible="false"></ve-line>
    </div>
  </div>
</template>
<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  props: ['downloadNumbers', 'onTrialNumbers'],
  components: {
    VeLine
  },
  data () {
    return {
      chartSettings: {
        xAxisType: 'category'
      },
      chartExtend: {
        xAxis: {
          axisLabel: {
            interval: 0,
            align: 'right'
          },
          data: this.downloadNumbers.map(function (str) {
            return str.time.replace('-', '\n')
          })
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            name: '下载',
            seriesLayoutBy: 'row',
            data: this.downloadNumbers.map(function (str) {
              return str.cnt
            })
          },
          {
            type: 'line',
            name: '试用',
            seriesLayoutBy: 'row',
            data: this.onTrialNumbers.map(function (str) {
              return str.cnt
            })
          }
        ]
      }
    }
  }
}
</script>
